<template>
  <view class="goods-nav-container">
    <uni-goods-nav 
      :fill="true" 
      :options="options" 
      :button-group="buttonGroup" 
      @click="handleNavClick" 
      @buttonClick="handleButtonClick"
    ></uni-goods-nav>
  </view>
</template>

<script>
// 引入 uni-goods-nav 组件
import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue';

export default {
  components: {
    uniGoodsNav
  },
  data() {
    return {
      // 导航选项配置，可设置客服、店铺、购物车等入口
      options: [
        {
          icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/kefu.png',
          text: '客服'
        },
        {
          icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/dianpu.png',
          text: '店铺'
        },
        {
          icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/carts.png',
          text: '购物车',
          info: 3 // 购物车商品数量提示
        }
      ],
      // 底部操作按钮组配置，如加入购物车、立即购买
      buttonGroup: [
        {
          text: '加入购物车',
          backgroundColor: '#ff0000',
          color: '#fff'
        },
        {
          text: '立即购买',
          backgroundColor: '#ffa200',
          color: '#fff'
        }
      ]
    };
  },
  methods: {
    // 导航选项点击事件处理
    handleNavClick(e) {
      console.log('导航选项点击', e);
      // 可根据 e.content.text 等判断点击的是哪个导航项，进行相应逻辑处理
      if (e.content.text === '客服') {
        // 客服相关逻辑
        uni.showToast({
          title: '点击了客服',
          icon: 'none'
        });
      } else if (e.content.text === '店铺') {
        // 店铺相关逻辑
        uni.navigateTo({
          url: '/pages/shop/shop'
        });
      } else if (e.content.text === '购物车') {
        // 购物车相关逻辑
        uni.navigateTo({
          url: '/pages/cart/cart'
        });
      }
    },
    // 底部按钮点击事件处理
    handleButtonClick(e) {
      console.log('底部按钮点击', e);
      if (e.content.text === '加入购物车') {
        // 加入购物车逻辑
        uni.showToast({
          title: '加入购物车成功',
          icon: 'none'
        });
      } else if (e.content.text === '立即购买') {
        // 立即购买逻辑
        uni.navigateTo({
          url: '/pages/order/order'
        });
      }
    }
  }
};
</script>

<style scoped>
.goods-nav-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
</style>